import React, { Component } from 'react'
import FinancialList from './FinancialList'
import style from './Financial.module.scss'
import moment from 'moment';
import { connect } from 'react-redux';
import url from '../../../utils/url';
import download from '../../../services/download';
// import moment from 'moment';
import { removeEmptyField } from '../../compoent/emptyFild';
import {
    Form,
    Button,
    TimePicker,
    DatePicker,
    Select
} from 'antd';

class Financial extends Component {
    state = {
        data: {},
        newValues: {},
        startDate: [],
        endTime: []

    }
    onFinish = (values) => {
        if (values.beginTime) {
            const date = values.beginTime
            values.beginTime = date ? moment(date[0]).format('YYYY-MM-DD') : ''
            values.endTime = date ? moment(date[1]).format('YYYY-MM-DD') : ''
        }

        console.log('Success:', values);
        if (values) {
            values.page = 1
            values.size = 10
            const newValues = removeEmptyField(values)
            this.props.finance(newValues)
            this.setState({ newValues })
            this.setState({
                data: values
            })
        } else {
            this.props.finance()
        }
    };
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    exportFinance = () => {
        const { data } = this.state;
        download(url.exportFinance,'GET',{beginTime: data.beginTime,endTime:data.endTime});
        /*window.location.href = url.exportFinance + '?beginTime=' + data.beginTime +
            '&endTime=' + data.endTime + '';*/
    };
    // storageTime = (props) => {
    //     this.setState({
    //         startDate: props.beginTime,
    //         endTime: props.endTime
    //     })
    // }
    render() {
        const { RangePicker } = DatePicker;
        const { newValues, startDate, endTime } = this.state
        console.log(startDate, endTime);
        return (
            <div>
                <div className={style.top}>
                    <Form
                        style={{ marginTop: 20, marginLeft: 20 }}
                        name="basic"
                        layout='inline'
                        // wrapperCol={{ span: 6 }}
                        onFinish={this.onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            style={{ marginLeft: 860, width: 450 }}
                            label="发起时间"
                            name="beginTime"
                            // rules={[{ message: 'Please input your username!' }]}
                        >
                            <RangePicker
                                // defaultValue={[moment().subtract(7, 'days'), moment()]}
                                // showTime
                                ranges={{

                                    // Today: [moment(), moment()],
                                    '本周': [moment().startOf('week'), moment().endOf('week')],
                                    '本月': [moment().startOf('month'), moment().endOf('month')],
                                }}></RangePicker>
                        </Form.Item>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" htmlType="reset" style={{ marginLeft: 50 }}>
                                重置
                            </Button>
                            <Button type="primary" onClick={this.exportFinance} style={{ marginLeft: 50 }}>
                                导出
                            </Button>
                        </Form.Item>

                    </Form>
                </div>
                <div className={style.middle}>
                    <FinancialList newValues={newValues} storageTime={this.storageTime} />
                </div>
            </div>
        )
    }
}

const mapState = state => ({
    ...state.finance
})
const mapDispatch = dispatch => ({
    ...dispatch.finance

})

export default connect(mapState, mapDispatch)(Financial);
